<template>
	<view class="content">
		<!-- 欢迎回来 -->
		<view class="hellohome">
			<text class="icon tn-icon-dragon"></text> 欢迎回来
		</view>
		<!-- 卡片 -->
		<view class="caa tn-radius">
			<view class="top tn-flex tn-flex-row-between ">
				<view class="imgdiv flex-item tn-w-2-12">
					<tn-avatar src='https://ui.yunchencloud.cn/shifuduanv3/static/info-2.jpg'></tn-avatar>
				</view>
				<view class="textname flex-item tn-w-10-12 tn-pt-sm">
					<view class="username">
						早上好，刘阿妹！
					</view>
					<view><tn-tag shape="radius" backgroundColor="#ffeadf" fontColor="#d99776">金牌技师</tn-tag></view>
				</view>
			</view>
			<view class="tn-height-nim"></view>
			<view class="bottom">
				<tn-grid align="center" col="3">
					<block v-for="(item, index) in orderList" :key="index">
						<!-- H5 -->
						<!-- #ifndef MP-WEIXIN -->
						<tn-grid-item>
							<view class="ordertext">
								<view class="order-num" :style="{color:item.color}">{{item.num}}</view>
								<view class="order-zi">{{item.text}}</view>
							</view>
						</tn-grid-item>
						<!-- #endif-->

						<!-- 微信小程序 -->
						<!-- #ifdef MP-WEIXIN -->
						<tn-grid-item :style="{width: gridItemWidth}">
							<view style="padding: 30rpx;">{{ item }}</view>
						</tn-grid-item>
						<!-- #endif-->
					</block>
				</tn-grid>
			</view>

		</view>
		<view class="caa tn-radius newnewslist">
			<view class="newnews tn-flex tn-flex-col-center">

				<view>消息<text style="color: #e83a30;">中心</text><text class="shuxian"></text></view>
				<view class="tn-flex-2">
					<tn-notice-bar :list="list" :leftIcon="false" :speed="500" fontColor="#838383" padding="0"
						mode="vertical"></tn-notice-bar>
				</view>
			</view>

		</view>
		<!-- 今日订单 -->
		<view class="dayprder">
			<view class="title">今日待服务订单</view>
			<List></List>
		</view>

	</view>
</template>

<script>
	import List from '@/components/list.vue'
	export default {
		components:{
			List
		},
		data() {
			return {
				// 滚动消息
				list: [
					'TuniaoUI现已发布V1.0.0',
					'今天天气晴朗，适合处理bug',
					'TuniaoUIV2.0.0即将发布',
					'今天想提前下班，领导不允许："你提前走人就算你是旷工了啊！"'
				],
				orderList: [{
						text: '今日新单',
						num: 5,
						color: '#4f4f4f',
						id: 0
					},
					{
						text: '待服务订单',
						num: 3,
						color: '#ffaa7f',
						id: 1

					},
					{
						text: '已完成订单',
						num: 12,
						color: '#55aaff',
						id: 2
					},

				]
			}
		},
		onLoad() {

		},
		methods: {

		},
		computed: {
			// 兼容小程序
			gridItemWidth() {
				return 100 / this.col + '%'
			}
		}
	}
</script>

<style lang="scss">
	.hellohome {
		display: flex;
		font-weight: bold;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		font-size: 34rpx;
		position: fixed;
		top: 40rpx;
		width: 100%;
	}

	.caa {
		background: white;
		padding: 30rpx;
		border-radius: 10rpx;
	}

	.imgdiv {
		margin-right: 20rpx;
	}

	.textname {
		flex: 2;
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
		padding-bottom: 10rpx;
	}

	.username {
		color: #4f4f4f;
		font-weight: 600
	}

	.content {
		min-height: 100vh;
		background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgb(255, 255, 255), rgb(255, 255, 255)), linear-gradient(130deg, #96DAC5, #CBF7E9);
		background-blend-mode: screen;
		padding: 30rpx;
		padding-top: 100rpx;
	}



	.ordertext {
		text-align: center;
		padding: 0 10rpx;
		margin-top: 20rpx;

		.order-num {
			font-size: 38rpx;
			color: #4f4f4f;
			font-weight: 700;
			margin-bottom: 10rpx;
		}

		.order-zi {
			font-size: 32rpx;
		}
	}

	.newnewslist {
		margin: 30rpx 0;
	}

	.newnews {
		font-weight: 700;
		display: flex;
	}

	.shuxian {
		background-color: #e6e6e6;
		display: inline-block;
		width: 4rpx;
		height: 24rpx;
		margin: 0 10rpx;
	}

	.dayprder .title {
		font-weight: bold;
		font-size: 34rpx;
	}



</style>